<template>
  <div style="height: calc(120vh - 50px); background: #fff; position: relative">
    <div class="mine_top"></div>
    <div
      style="
        padding: 0 1rem;
        z-index: 10;
        position: relative;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        height: 100%;
      "
    >
      <div style="height: calc(100% - 74px)">
        <div class="mine_top_header">
          <span>我的</span>
          <!-- <van-icon name="setting-o" /> -->
          <i style="font-size: 0.8rem" @click="editPassWord">
            {{ isPassWord ? "返回" : "修改密码" }}
          </i>
        </div>
        <div class="mine_info">
          <div class="mine_info_item">
            <img v-if="headPicture" :src="headPicture" alt="" />
            <img v-else src="@/assets/logo/logo.png" alt="" />
            <p>{{ nickname }}</p>
          </div>
        </div>
        <div
          style="
            margin-top: 8px;
            height: calc(100% - 11.31rem - 3.12rem - 8px);
            overflow: auto;
          "
          v-if="!isPassWord"
        >
          <van-field v-model="adminUserId" label="身份证号" readonly />
          <van-field v-model="subjectTitle" label="培训科目" readonly />
          <van-field v-model="company" label="公司名称" readonly />
          <van-field v-model="score_current" label="培训学时" readonly />
          <van-field v-model="interval" label="培训剩余天数" readonly />
          <van-field
            v-model="mock_count_left"
            label="练题剩余次数"
            readonly
            v-if="
              Jurisdiction.模拟考试 == '显示' ||
              Jurisdiction.正式考试 == '显示' ||
              Jurisdiction.专项练习 == '显示'
            "
          />
          <van-field v-model="start_time" label="开通时间" readonly />
          <van-field v-model="login_time" label="登录时间" readonly />
          <p
            style="
              width: 100%;
              text-align: center;
              padding: 18px 0;
              color: #f00;
            "
            @click="
              () => {
                this.$router.push('/user');
              }
            "
            v-if="studentinforsite"
          >
            查看更多
          </p>
        </div>
        <div
          style="
            margin-top: 8px;
            height: calc(100% - 11.31rem - 3.12rem - 8px);
            overflow: auto;
          "
          v-else
        >
          <van-field v-model="oldpassword" type="password" label="原密码" />
          <van-field v-model="newpassword" type="password" label="新密码" />
        </div>
      </div>
      <div class="mine_foot">
        <!-- <van-button
          v-if="
            hasInfoSign &&
            (http.indexOf('zzfb') != -1 || http.indexOf('qiye') != -1)
          "
          type="danger"
          plain
          class="button"
          style="margin-bottom: 20px"
          @click="checkInfo"
          >确认信息</van-button
        > -->
        <van-button
          type="danger"
          v-if="!isPassWord"
          class="button"
          @click="logout"
          >退出登录</van-button
        >
        <van-button type="info" v-else class="button" @click="commit"
          >保存</van-button
        >
      </div>
    </div>
    <van-dialog
      confirmButtonText="取消"
      confirmButtonColor="#000"
      cancelButtonText="确认签名"
      @cancel="signCheck"
      @confirm="cancelSign"
      class="isInfo"
      v-model="showInfo"
      title="信息确认"
      show-cancel-button
    >
      <p class="item">
        <span class="lable">身份证号：</span>
        <span class="content">{{ adminUserId }}</span>
      </p>
      <p class="item">
        <span class="lable">姓名:</span>
        <span class="content">{{ nickname }}</span>
      </p>
      <p class="item">
        <span class="lable">资格类型：</span>
        <span class="content">{{ subjectTitle }}</span>
      </p>
      <p class="item">
        <span class="lable">初复训：</span>
        <span class="content">{{ currentInfo.exam_type }}</span>
      </p>
      <p class="item">
        <span class="lable">性别：</span>
        <span class="content">{{ gender }}</span>
      </p>
      <p class="item">
        <span class="lable">健康状态：</span>
        <span class="content">{{ currentInfo.health }}</span>
      </p>
      <p class="item">
        <span class="lable">学历：</span>
        <span class="content">{{ currentInfo.education }}</span>
      </p>
      <p class="item">
        <span class="lable">工作单位：</span>
        <span class="content">{{ company }}</span>
      </p>
      <p class="item">
        <span class="lable">证件照：</span>
        <img width="100" height="auto" :src="currentInfo.photo" alt="" />
      </p>
    </van-dialog>

    <van-dialog
      confirmButtonText="取消"
      confirmButtonColor="#000"
      cancelButtonText="确认签名"
      @cancel="signCommit"
      class="isInfo"
      v-model="showSign"
      title="签字"
      show-cancel-button
    >
      <autograph :options="options" ref="autograph"> </autograph>
    </van-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import autograph from "@/components/autograph";
import {
  getsubject_id,
  getsubjectTitle,
  getapplyid,
  getcurrentInfo,
  getGender,
} from "@/utils/auth";

import { passwordEdit, updateApply } from "@/api/admin.js";
import { upFileqm } from "@/utils/upFiel.js";
export default {
  components: {
    autograph,
  },
  computed: {
    ...mapGetters([
      "userinfor",
      "nickname",
      "adminUserId",
      "login_time",
      "headPicture",
      "Jurisdiction",
      "initObj",
      "avatar",
    ]),
  },
  data() {
    return {
      options: {
        isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可选
        lastWriteSpeed: 1, //书写速度 [Number] 可选
        lastWriteWidth: 2, //下笔的宽度 [Number] 可选
        lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
        lineJoin: "bevel", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
        canvasWidth: 280, //canvas宽高 [Number] 可选
        canvasHeight: 280, //高度  [Number] 可选
        isShowBorder: false, //是否显示边框 [可选]
        bgColor: "#fff", //背景色 [String] 可选
        borderWidth: 1, // 网格线宽度  [Number] 可选
        borderColor: "#ff787f", //网格颜色  [String] 可选
        writeWidth: 5, //基础轨迹宽度  [Number] 可选
        maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
        minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
        writeColor: "#101010", // 轨迹颜色  [String] 可选
        isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
        imgType: "png", //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
      },
      hasInfoSign: false,
      valueObj: {},
      confirmImg: "",
      signImg: "",
      gender: getGender(),
      showInfo: false,
      showSign: false,
      oldpassword: "",
      newpassword: "",
      subjectTitle: getsubjectTitle(),
      currentInfo: JSON.parse(getcurrentInfo()),
      company: "",
      interval: "",
      score_current: "",
      mock_count_left: "",
      start_time: "",
      phone: "",
      isPassWord: false,
      http:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/user")
            ),
      studentinforsite: false,
    };
  },
  methods: {
    cancelSign() {
      this.showInfo = false;
    },
    signCheck() {
      this.showSign = true;
    },
    async signCommit() {
      this.signImg = this.$refs.autograph.commit();
      await upFileqm(this.signImg, this.nickname, {
        field: "signature",
      }).then((res) => {
        if (res.code == 200) {
          this.valueObj.extra.confirmInfo = res.data.url;
          console.log(this.valueObj, "88");
        }
      });
      await updateApply(this.valueObj).then((res) => {
        if (res.code == 200) {
          this.$toast.success("信息已确认!");
          this.hasInfoSign = false;
          this.$forceUpdate();
        }
      });
    },
    checkInfo() {
      this.showInfo = true;
    },
    editPassWord() {
      this.isPassWord = !this.isPassWord;
    },
    async logout() {
      await this.$store.dispatch("user/logout");
      window.open(this.http, "_self");
      // var userAgent = navigator.userAgent;
      // if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") !=-1) {
      //   window.open('','_self').close()
      // }else {
      //   window.opener = null;
      //   window.open("about:blank", "_self");
      //   window.close();
      // }
      // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    //修改密码 提交
    commit() {
      if (!this.oldpassword) {
        return this.$toast.fail("原密码不能为空");
      }
      if (!this.newpassword) {
        return this.$toast.fail("新密码不能为空");
      }
      this.loading = true;
      passwordEdit({
        password_old: this.oldpassword,
        password_new: this.newpassword,
      }).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.$router.push("/wxlogin");
          this.$toast.success("密码修改成功");
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
  },
  created() {
    let obj = {};
    this.userinfor.map((item) => {
      if (item.applyid == getapplyid()) {
        obj = item;
        this.valueObj = item;
        if (
          this.valueObj.extra == null ||
          this.valueObj.extra.length ||
          this.valueObj.extra.length == 0
        ) {
          this.valueObj.extra = {};
        }

        if (this.valueObj.extra.hasOwnProperty("confirmInfo")) {
          this.hasInfoSign = false;
        } else {
          this.hasInfoSign = true;
        }
      }
    });
    console.log(this.valueObj, "019");
    this.interval = obj.interval;
    this.score_current = obj.score_current;
    this.mock_count_left = obj.mock_count_left;
    this.start_time = obj.start_time;
    this.company = obj.company;
    let objA = JSON.parse(this.initObj.setting);
    this.studentinforsite =
      objA.studentinforsite && objA.studentinforsite == "开启" ? true : false;
    // this.interval = this.userinfor.interval
    // this.interval = this.userinfor.interval
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .isInfo {
    padding: 1rem;
    .van-dialog__header {
      padding-top: 0;
      padding-bottom: 1rem;
    }
    .item {
      display: flex;
      justify-content: left;
      .lable {
        flex-shrink: 0;
        width: 5rem;
        display: inline-block;
      }
      .content {
        width: 14rem;
      }
    }
  }
}

.mine_top {
  height: 10.16rem;
  width: 100vw;
  background: #327bff;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  position: absolute;
  top: 0;
}
.mine_top_header {
  color: #fff;
  height: 3.12rem;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mine_info {
  width: 100%;
  height: 11.31rem;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 0.625rem;
  display: flex;
  justify-content: center;
  .mine_info_item {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 3.44rem;
      height: 3.44rem;
      border-top: 1px solid #aaa;
      // border-bottom:none;
      border-radius: 50%;
      margin-bottom: 8px;
      padding: 5px;
    }
    p {
      font-size: 1.125rem;
      font-weight: 600;
    }
  }
}
.mine_foot {
  padding: 15px;
  .button {
    width: 100%;
    padding: 0;
    border-radius: 0.45rem;
  }
}
</style>